iT邦幫忙

2023 iThome 鐵人賽

DAY 19
0

https://ithelp.ithome.com.tw/upload/images/20231004/20141551A4FF2cgXmy.jpg

前言

前面章節我們學會了如何使用 Markdown 或 MDX 、在內容集合中定義資料格式與索取資料。本章節將解釋如何在 Astro 中創造端點提供不同種類的資料,並實作生成一個 RSS 檔案作為練習。

端點

什麼是端點(EndPoint)?在靜態模式的網站上,端點就是一份會產生各種類檔案的 .ts.js檔案,而在 SSR 模式下端點會成為實時的伺服器 API。

什麼是 RSS

RSS 是一種標準化的方式,一種特定格式的 XML 檔案,設計來推播最新資訊給網站用戶,用戶要知道網站有沒有更新會需要手動的造訪網站十分麻煩,因此使用 RSS 選擇性推播網站新聞給用戶是一件方便的功能。

簡單來說你會需要在網站根部有一個 RSS 的 XML 檔案,裡面存放著想發送的資料,用戶便可以透過這個檔案追蹤網站的最新動態。正好可以透過創造端點與 RSS 插件來達成這個目的。

靜態檔案端點(生成一個 JSON 檔案)

第一步:開設端點

添加 .js.ts 文件到 /pages 目錄,副檔名將會在建構過程中被刪除,因此還要前綴要創建的靜態檔案的副檔名。例如:src/pages/data.json.ts 會生成 src/pages/data.json

第二步:導出 GET 函數

這樣在 /foobar.json 路徑就會生成一個內容為:{"message":"Hello World"} 的 JSON 檔案了,用端點創造檔案就是這麼的簡單。

// foobar.json.ts
export async function GET() {
  return new Response(
    JSON.stringify({
      message: 'Hello World',
    })
  )
}

製作 RSS

第一步:安裝與設定 RSS 整合

Astro 提供了自動化生成 RSS 文件的整合服務,首先我們必須安裝:@astrojs/rss並且在 astro.config 檔案中註明 Site 的參數(Astro RSS 用這個參數來生成其內容)

npm install @astrojs/rss

第二步:開設端點

與前面的範例相同,添加 .js.ts 文件到 /pages 目錄。,但這次我們希望端點的檔案是 XML 格式,因此檔案名稱為: rss.xml.ts。在該檔案中透過 @astrojs/rss 整合的幫助,再加上從內容集合撈取出來的資料,快速自動的產出整個網站的 RSS XML 檔案:

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';

export const GET = async (context) => {
  const posts = await getCollection('post');
  const avaliablePosts = posts.filter((post) => !post.data.isDraft);

  const rssContent = await rss({
    title: '自定義標題',
    description: '自定義說明',
    site: context.site,
    items: avaliablePosts.map((post) => ({
      title: post.data.titleTC,
      description: post.data.excerpt,
      pubDate: post.data.publishDate,
      link: `post/${post.slug}`,
    })),
  });

  return new Response(rssContent.body);
};

總結

如果你的網站較少更新或用戶不怎麼用 RSS 那麼就沒有製作 RSS 的必要,不過仍是一個很好的練習可以嘗試看看,下一章節我們會透過開設端點創造更多實際的功能,敬請期待!

最後會建議實際動手練習,如果過程中有問題可以參考看看我的範例

  • 嘗試創造一個靜態端點
  • 嘗試建構自己網站的 RSS Feed

延伸閱讀


上一篇
Day18 - 實作集合分類功能
下一篇
Day20 - 實作搜尋功能
系列文
網頁開發沒有這麼簡單過!實際案例帶你上手 Astro.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言